<template>
  <view class="page">
    <!-- 门店列表 -->
    <view class="store-list">
      <view class="store-item" v-for="(store, index) in storeList" :key="index" @click="goback(store)">
        <!-- 门店信息 -->
        <view class="store-info">
          <!-- 第一行：门店名称和距离 -->
          <view class="info-row first-row">
            <text class="store-name">{{store.storeName}}</text>
            <text class="store-distance">{{store.distanceStr?store.distanceStr:''}}</text>
          </view>
          
          <!-- 分割线 -->
          <view class="divider"></view>
          
          <!-- 第二行：位置和电话按钮 -->
          <view class="info-row second-row">
               <text class="store-address">{{store.areaName}}{{store.address}}</text>
           
              <image @click.stop="callPhone(store.phone)" src="/static/img/icon_phone.png" mode="widthFix" class="phone-icon"></image>
            
            
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      storeList: [
       
      ],
	  type:'',
    }
  },
  onLoad(opt) {
  	this.storeList=uni.getStorageSync("shopList")
	if(opt.type){
		this.type=opt.type
	}
  },
  methods: {
	goback(item){
		    uni.setStorageSync('ckshop', item)
			uni.navigateBack(-1)
	},
    callPhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber
      })
    }
  }
}
</script>

<style scoped lang="less">
.page {
  min-height: 100vh;
  background-color: #F4F5F7;
  padding: 24rpx;
  box-sizing: border-box;
}

.store-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.store-item {
  background-color: #fff;
  border-radius: 6rpx;
  overflow: hidden;
  padding: 24rpx;
}

.store-info {
  display: flex;
  flex-direction: column;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.first-row {
  margin-bottom: 12rpx;
}

.second-row {
  margin-top: 12rpx;
}

.store-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.store-distance {
  font-size: 24rpx;
  color: #999;
}

.store-address {
  font-size: 24rpx;
  color: #666;
  flex: 1;
  margin-right: 20rpx;
}

.divider {
  height: 1rpx;
  background-color: #eee;
  width: 100%;
}

.phone-btn {
  width: 120rpx;
  height: 50rpx;
  line-height: 50rpx;
  background-color: #EC0F0A;
  color: #fff;
  font-size: 24rpx;
  border-radius: 25rpx;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &::after {
    border: none;
  }
}

.phone-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 8rpx;
}
</style>